<template>
  <view class="container">
    <view class="info">
      <text style="font-size: 40rpx; font-weight: bold;">维修信息</text>
      <view class="info-item">
        <text>维修单号：</text>
        <text>3535252</text>
      </view>
      <view class="info-item">
        <text>维修状态：</text>
        <text>进行中</text>
      </view>
      <view class="info-item">
        <text>车主姓名：</text>
        <text>张三</text>
      </view>
      <view class="info-item">
        <text>联系方式：</text>
        <text>1993829282</text>
      </view>
      <view class="info-item">
        <text>维修方式：</text>
        <text>上门取车</text>
      </view>
      <view class="info-item">
        <text>取车位置：</text>
        <text>山阳区32号</text>
      </view>
      <view class="info-item">
        <text>预约日期：</text>
        <text>2022/11/10 11:00</text>
      </view>
      <view class="info-item">
        <text>提交日期：</text>
        <text>2022/11/08 12:34</text>
      </view>
    </view>
    <view class="vehicle-info">
      <text style="font-size: 40rpx; font-weight: bold;">车辆信息</text>
      <view class="info-item">
        <text>车辆类型：</text>
        <text>大客车</text>
      </view>
      <view class="info-item">
        <text>车牌号：</text>
        <text>豫JA5323</text>
      </view>
    </view>
    <view class="photos">
      <text>整车照片：</text>
      <image src="../../../static/image/zrn.jpg" mode="aspectFill"></image>
      <text>维修部位照片：</text>
      <image src="../../../static/image/zrn.jpg" mode="aspectFill"></image>
	  <image src="../../../static/image/zrn.jpg" mode="aspectFill"></image>
    </view>
    <button class="cancel-btn">取消订单</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 这里可以添加数据属性，如果需要的话
    };
  },
  methods: {
    // 这里可以添加方法，如果需要的话
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.qr-code {
  margin-bottom: 20px;
}
.info, .vehicle-info {
  margin-bottom: 20px;
}
.info-item {
  /* display: flex;
  justify-content: flex-start; */
  margin-top: 10px;
}
.info-item text:nth-child(1){
	margin: 0 85rpx 0 15rpx;
}
.photos {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.photos text {
  width: 100%;
}
.photos image {
  width: 48%;
  margin-bottom: 2%;
}
.cancel-btn {
  width: 200rpx;
  border: 1px solid royalblue;
  color: royalblue;
  text-align: center;
  margin-left: 475rpx;
  
}
</style>